<template>
  <div>
    <my-menu></my-menu>
    <div class="container">
      <div class="read">
        <h3 class="title">{{form.title}}</h3>
        <p>
          <em class="author">
            By/yeshaojun
          </em>
          <span class="read-time">
            {{form.create_time}}
          </span>
          <span class="read-total" v-if="form.content">
              阅读时间: {{Math.ceil(form.content.length/400)}}min
          </span>
          <span class="read-num">
            阅读次数: {{form.count}}
          </span>
        </p>
        <div class="hr"></div>
        <div class="content" v-html="content">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import marked from 'marked'
import myMenu from '../components/menu'
export default {
  data () {
    return {
      form: {
        content: '',
        title: '',
        create_time: '',
        count:''
      },
      page: {
        page: 1,
        pageSize: 10,
        pageTotal: 1
      },
      test: '# heelo'
    }
  },
  components: {
    myMenu
  },
  methods: {
    getNews (id) {
      this.$store.dispatch('getNews', {
        data: {
          id: id,
          page: this.page.page,
          pageSize: this.page.pageSize
        },
        cb: (res) => {
          if (res.data.code === 20000) {
            this.form = res.data.data
            this.page.pageTotal = parseInt(res.data.pageTotal)
            this.page.page = parseInt(res.data.page)
          }
        }
      })
    }
  },
  computed: {
    content () {
      return marked(
        this.form.content, { sanitize: true }
      )
    }
  },
  mounted () {
    console.log('this.$route.params.id', this.$route.params.id)
    this.getNews(this.$route.query.id)
  }
}
</script>
<style lang="stylus" scoped>
@media screen and (min-width: 1000px)
  .container
    width: 1200px
    margin: 0 auto
    .read
      background-color: #fff
      margin-top: 20px
      padding: 40px 80px
      .title
        font-size: 24px
        padding-top: 12px
        padding-bottom: 15px
      p
        text-align: right
        em
          font-style normal
        span
          font-size: 16px
          color: #999
          padding-right: 10px
          padding-left: 10px
        .author
          float left
          font-size: 14px
          color: #999
        span+span
          border-left: 1px solid #ccc
      .hr
        width: 100%
        height: 1px
        background-color: #cccccc
        margin-top: 30px
      .content
        margin-top 20px
        font-size 16px
        line-height 24px
@media screen and (max-width: 1000px)
  .container
    width: 100%
    background #fff
    padding 4px
    .read
      background-color: #fff
      padding: 40rem/37.5 80rem/37.5
      .title
        display none
      p
        text-align: right
        font-size: 16rem/37.5
        em
          font-style normal
        span
          font-size: 16rem/37.5
          color: #999
          padding-right: 10rem/37.5
          padding-left: 10rem/37.5
        .author
          float left
          font-size: 14rem/37.5
          color: #999
        span+span
          border-left: 1px solid #ccc
      .hr
        width: 100%
        height: 1px
        background-color: #cccccc
        margin-bottom: 6px
      .content
        margin-top 20rem/37.5
        font-size 16rem/37.5
        line-height 24rem/37.5
</style>

<style>
@import url('./md.css');
</style>
